<template>
	<div class="mainWrapper">
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>调度中心</el-breadcrumb-item>
			<el-breadcrumb-item>人才未派工记录</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 搜索栏 -->
		<div class="content_Box box-shadow">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="3">
						<el-button type="default" class="fl" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="21" class="fr">
						<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_120">
								<el-input v-model="searchForm.staff_name" placeholder="姓名"></el-input>
							</el-form-item>
							<el-form-item class="w_120">
								<el-input v-model="searchForm.mobile" placeholder="手机号" maxlength="11"></el-input>
							</el-form-item>
							<!-- 代理商 -->
							<lh-agent-list @sendValue="setValue" :reset="agent_reset"></lh-agent-list>
							<el-form-item>
								<el-select class="w_120" v-model="searchForm.city_id" placeholder="请选择城市">
									<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-date-picker
									class="w_180i"
									v-model="searchForm.start_date"
									type="date"
									value-format="yyyy-MM-dd"
									format="yyyy-MM-dd"
									placeholder="开始日期"
								></el-date-picker>
							</el-form-item>
							~
							<el-form-item>
								<el-date-picker
									class="w_180i"
									v-model="searchForm.end_date"
									type="date"
									value-format="yyyy-MM-dd"
									format="yyyy-MM-dd"
									placeholder="结束日期"
								></el-date-picker>
							</el-form-item>
							<el-form-item class="w_160" style="margin-left: 5px;">
								<el-select
									v-model="searchForm.reason_id"
									placeholder="未派工原因"
									clearable
									@clear="selectClear('reason_id')"
								>
									<el-option
										v-for="item in reasonArr"
										:key="item.id"
										:label="item.label_name"
										:value="item.id"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-date-picker
									class="w_180i"
									v-model="searchForm.start_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="00:00:00"
									placeholder="创建开始时间"
								></el-date-picker>
							</el-form-item>
							~
							<el-form-item>
								<el-date-picker
									class="w_180i round-right"
									v-model="searchForm.end_time"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									format="yyyy-MM-dd HH:mm:ss"
									default-time="23:59:59"
									placeholder="创建结束时间"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>

			<!-- tab表格数据 -->
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="notWorkList" stripe>
						<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
						<el-table-column prop="staff_name" label="姓名" min-width="60"></el-table-column>
						<el-table-column prop="mobile" label="手机号" min-width="100"></el-table-column>
						<el-table-column prop="gender" label="性别" min-width="60"></el-table-column>
						<el-table-column prop="age" label="年龄" min-width="60"></el-table-column>
						<el-table-column prop="job_type" label="岗位" min-width="120"></el-table-column>
						<el-table-column prop="start_date" label="开始日期" min-width="120"></el-table-column>
						<el-table-column prop="end_date" label="结束日期" min-width="120"></el-table-column>
						<el-table-column prop="reason" label="未派工原因" width="80"></el-table-column>
						<el-table-column prop="remark" label="备注" min-width="120">
							<template slot-scope="{ row }">
								<el-tooltip class="item" effect="dark" :content="row.remark" placement="top">
									<span style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{
										row.remark
									}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column prop="work_type" label="人才类型" width="80">
							<template slot-scope="scope">
								<span :class="scope.row.work_type == 1 ? 'green' : 'red'">{{ scope.row.work_type | workType }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="certificate_health_status" label="健康证" min-width="60">
							<template slot-scope="scope">
								<span>{{ scope.row.certificate_health_status | health }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="creater_name" label="创建人" min-width="80"></el-table-column>
						<el-table-column prop="add_time" label="创建时间" min-width="150"></el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" :disableMountedFetch="true" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchCityList } from '@/api/city.js'
import { notWorkList, noWorkReason } from '@/api/task.js'
export default {
	name: 'NoworkgetList',
	data() {
		return {
			//搜索选项
			searchForm: {
				staff_name: '', //姓名
				mobile: '', //手机号
				start_date: '', //开始日期
				end_date: '', //结束日期
				reason_id: '', //未出工原因
				start_time: '', //创建时间
				end_time: '', //创建结束时间
				city_id: '', //选择城市
				agent_id: '' //代理商
			},
			url: common.url,
			cityList: [], //城市列表
			reasonArr: [], //未出工原因
			notWorkList: [], //tab表格数据
			//分页数据
			total: 0,
			pageNum: 1,
			pageSizeNow: 20,

			agent_reset: 0
		}
	},
	created() {
		this.notWorkReason() //未出工的原因
		// this.getcityList() //获取城市
		// this.noWorkList() //获取表格数据
	},
	methods: {
		setValue(data) {
			console.log(data)
			this.searchForm.agent_id = data.agent_id

			this.cityList = data.city_list
			if (this.cityList.length > 0) {
				this.searchForm.city_id = this.cityList[0].id
			}

			this.noWorkList() //获取表格数据
		},
		//导出表格
		downloadOrder() {
			let param = $.param({
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				operation: 'export',
				export: '1',
				...this.searchForm
			})
			window.location.href = this.url + '/nowork/getList?' + param
		},
		//搜索按钮
		shearchBtn() {
			this.pageNum = 1
			this.noWorkList()
		},
		//重置按钮
		resetBtn() {
			this.searchForm.staff_name = ''
			this.searchForm.mobile = ''
			this.searchForm.start_date = ''
			this.searchForm.end_date = ''
			this.searchForm.reason_id = ''
			this.searchForm.start_time = ''
			this.searchForm.end_time = ''

			//重置代理商
			this.agent_reset += 1
		},
		//搜索清空数据
		selectClear(type) {
			this.reason_id = ''
		},
		//分页数据
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.noWorkList()
		},
		// 获取未出工的原因
		async notWorkReason() {
			await noWorkReason({ label_type: 'no_work_reason' })
				.then(res => {
					this.reasonArr = res
				})
				.catch(e => {
					this.$message({ type: 'info', message: e.msg || e.message || '服务器错误' })
				})
		},
		// 获取城市列表
		// async getcityList() {
		// 	await fetchCityList()
		// 		.then(res => {
		// 			this.cityList = res.list
		// 			this.searchForm.city_id = parseInt(this.cityList[0].id)
		// 		})
		// 		.catch(e => {
		// 			this.$message({ type: 'info', message: e.msg || e.message || '服务器错误' })
		// 		})
		// },
		//获取表格数据
		noWorkList() {
			notWorkList({ page: this.pageNum, pageSize: this.pageSizeNow, ...this.searchForm })
				.then(res => {
					this.notWorkList = res.list
					this.total = res.count
				})
				.catch(e => {
					this.$message({ type: 'info', message: e.msg || e.message || '服务器错误' })
				})
		}
	},
	filters: {
		workType(status) {
			const statusMap = {
				1: '兼职',
				2: '全职'
			}
			return statusMap[status]
		},
		health(status) {
			const statusMap = {
				1: '有',
				2: '无'
			}
			return statusMap[status]
		}
	}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/roledemand/NoworkgetList.vue